feat(Gallery): add Gallery component #247
Conversation
kseniya57
requested review from
KirillDyachkovskiy,
amje,
ValeraS and
korvin89
as code owners
|
Preview is ready. |
| @@ -0,0 +1,18 @@ | |||
| import React from 'react'; | |||
|
|
|||
| import {FilePreview} from '../../FilePreview'; | |||
There was a problem hiding this comment.
It's better to use FIlePreview component from gravity-ui/uikit. Current component will be removed in next major
There was a problem hiding this comment.
There is no such export.
There was a problem hiding this comment.
need version 6.35.0 of uikit(
src/components/FilesGallery/components/VideoFileView/VideoFileView.tsx
Outdated
Show resolved
Hide resolved
src/components/FilesGallery/__stories__/FilesGallery.stories.tsx
Outdated
Show resolved
Hide resolved
|
@kseniya57 Do we have rfc fo this components? |
|
Yes |
kseniya57
force-pushed
the
gallery
branch
3 times, most recently
from
401a5d6 to
8c07955
Compare
kseniya57
force-pushed
the
gallery
branch
2 times, most recently
from
855b632 to
772a07f
Compare
kseniya57
changed the title
src/components/Gallery/Gallery.tsx
Outdated
| const activeItem = items[activeItemIndex] || items[0]; | ||
|
|
||
| if (!items.length) { | ||
| return null; |
There was a problem hiding this comment.
It's worth considering a empty state. It's strange when the modal just doesn't appear when you try to open it through a prop.
src/components/Gallery/Gallery.scss
Outdated
| $filePreviewBlock: '.#{variables.$ns}file-preview'; | ||
|
|
||
| #{$block} { | ||
| .g-modal__content-wrapper { |
There was a problem hiding this comment.
Can be used var --g-modal-margin from public css api
src/components/Gallery/Gallery.scss
Outdated
| &_mode_full-screen { | ||
| overflow: hidden; | ||
|
|
||
| .g-modal__content-wrapper, |
There was a problem hiding this comment.
Can be used var --g-modal-border-radius
|
|
||
| import {GalleryFile, files, images} from './mockData'; | ||
|
|
||
| export default { |
There was a problem hiding this comment.
it would be great to see examples of custom actions and a case with а FallbackText in storybook
| type: 'document', | ||
| url: 'https://preview.gravity-ui.com/icons', | ||
| name: 'Html page', | ||
| interactive: true, |
There was a problem hiding this comment.
interactive: true but in storybook buttons are still working
| <img | ||
| className={cnImageView(null, className)} | ||
| src={src} | ||
| alt="" |
There was a problem hiding this comment.
Maybe we should add alt to the props?
Add the components for rendering galleries (base gallery and the files gallery with file previews and some pre-defined active file renderers)